<script setup lang="ts">

import { VueFlow } from '@vue-flow/core'
import { edgeList, nodeList } from '@views/flow/basic/basicData.ts'
import { Background } from '@vue-flow/background'
import { MiniMap } from '@vue-flow/minimap'
const nodes = ref(nodeList)
const edges = ref(edgeList)

</script>

<template>
  <div style="height: calc(100vh - 60px)">
    <VueFlow :nodes="nodes" :edges="edges">
      <Background
      :variant="'dots'"
      :gap="20"
      :size="4"
      patternColor="#f40"

      :height="50"
      :width="50"
      :x="120"
      :y="120"
      />
      <!--bgColor="#fff"-->
      <MiniMap pannable zoomable
               nodeColor="#133"
               nodeStrokeColor="#f12"
               :nodeStrokeWidth="12"
               :nodeBorderRadius="24"
               maskColor="#555"
      />
    </VueFlow>
  </div>
</template>

<style scoped>
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';

/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';
</style>
